<template>
	<view class="layout">
		<form>
			<view v-for="(item, index) in column" v-if="!item.hidden" :key="index">
				<moreTips v-if="item.type == 'tips'" :item="item" :name="item.name" @tipsChange="tipsChange"></moreTips>
				<normalInput v-if="item.type == 'normalInput'" :item="item" :name="item.name" :index="index" @inputChange="inputChange($event, index)"></normalInput>
				<textareaModule v-if="item.type == 'textarea'" :item="item" :name="item.name" :index="index" @textChange="textChange($event, index)"></textareaModule>
				<radioModule v-if="item.type == 'radio'" :item="item" :name="item.name" :index="index" @radioChange="radioChange($event, index)"></radioModule>
				<pickerModule v-if="item.type == 'picker'" :picker="item" :index="index" :name="item.name" @pickerChange="pickerChange($event, index)"></pickerModule>
				<upLoad v-if="item.type == 'upload'" :item="item" :index="index" @uploadChange="uploadChange($event, index)"></upLoad>
				<checkBoxModule v-if="item.type == 'checkBox'" :item="item" :index="index" @checkBoxChange="checkBoxChange($event, index)"></checkBoxModule>
			</view>
			<slot></slot>
			<button form-type="submit" :class="submitStatus ? 'submitButton' : 'submitButtonActive'" v-show="!button.hide" :disabled="submitStatus" @click="formSubmit">
				<!-- {{submitButtonText}} -->
				提交
			</button>
		</form>
	</view>
</template>

<script>
import normalInput from './normalInput.vue';
import textareaModule from './textarea.vue';
import radioModule from './radio.vue';
import pickerModule from './picker.vue';
import upLoad from './upload.vue';
import moreTips from './moreTips.vue';
import checkBoxModule from './checkBox.vue';
export default {
	data() {
		return {};
	},
	created() {},
	methods: {
		formSubmit(e) {
			this.$emit('submitFun', e);
		},
		inputChange(e, index) {
			this.column[index].value = e.value;
			this.$emit('update:column', this.column);
			this.$emit('changeColumn', this.column); // 解决无法实时变化问题
		},
		textChange(e, index) {
			this.column[index].value = e.value;
			this.$emit('update:column', this.column);
			this.$emit('changeColumn', this.column); // 解决无法实时变化问题
		},
		tipsChange() {
			this.$emit('changeColumn', this.column); // 解决无法实时变化问题
		},
		radioChange(e, index) {
			this.column[index].value = e.value;
			this.$emit('update:column', this.column);
		},
		pickerChange(e, index) {
			this.column[index].value = e.value;
			this.column[index].text = e.text;
			this.$emit('update:column', this.column);
			this.$emit('changeColumn', this.column); // 解决无法实时变化问题
		},
		checkBoxChange(e, index) {
			this.column[index].value = e;
			this.$emit('update:column', this.column);
			this.$emit('changeColumn', this.column); // 解决无法实时变化问题
		},
		uploadChange(e, index) {
			this.column[index].attachmentVoListStr = e.attachmentVoListStr;
			// this.column[index].docFileUrl = e.docFileUrl;
			// console.log(this.column[index].attachmentVoListStr);
			this.$emit('update:column', this.column);
		}
	},
	components: {
		normalInput,
		radioModule,
		pickerModule,
		upLoad,
		moreTips,
		textareaModule,
		checkBoxModule
	},

	props: {
		column: {
			type: Array,
			required: true
		},
		button: {
			type: Object
		},
		submitStatus: {
			type: Boolean
		}
	},
	computed: {
		submitButtonText() {
			let text = '提交';
			// if (this.button.text && this.button.text != undefined) {
			// 	debugger;
			// 	text = this.button.text;
			// }
			// if (text == undefined) {
			// 	text = '提交'
			// }
			return text;
		}
	},
	watch: {
	}
};
</script>

<style lang="scss" scoped>
.layout {
	view {
		width: 100%;

		radio {
			width: 100%;
		}
	}
}
button {
	margin: 40upx auto;
}
</style>
